<!DOCTYPE html>
<html style="height: 100%;overflow: hidden;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
    <title></title>
    <!--引入全部依赖-->
    <script src="vender/jquery-3.4.1/jquery.leo.js"></script>
    <script src="vender/panzoom/jquery.panzoom.leo.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .parent {
            position: absolute;
            top: 2rem;
            left: 0;
            right: 0;
            bottom: 0;
            /*overflow: hidden;*/
        }

        .panzoom {
            width: 400px;
            height: 100%;
            position: relative;
            cursor: move;
            transition: transform 200ms ease-in-out 0s;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }

        /*新增地图样式*/
        .new_map {
            position: relative;
            width: 1600px;
            transform-origin: left top;
            -webkit-transform-origin: left top;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -webkit-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -moz-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -ms-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -o-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
        }

        .gouwuche,
        .spot_img {
            color: #FFFFFF;
            text-align: center;
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 8888;
            -webkit-transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            overflow: hidden;
        }

        .gouwuche {
            background-image: url(http://localhost:8084/carmap/map/cart.svg);
            background-size: 100%;
            background-repeat: no-repeat;
        }

        /*新增楼幢样式*/
        .building_box {
            position: absolute;
            top: 100px;
            left: 100px;
            font-size: 12px;
            text-align: center;
            background-color: #4c97e5;
            color: #FFFFFF;
            -webkit-transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        /*安卓性能提高样式*/
        .parent .android_box {
            will-change: transform;
        }
    </style>
</head>
<body>
<div>测试</div>
<div class="parent">
    <div class="panzoom">
        <img class="new_map"/>
    </div>
</div>
</body>
<script>
    var pageData = JSON.parse('{"id":1,"estate_id":1,"name":"地下负二层车位平面图","pic":"https://weilaihaoku2.oss-cn-hangzhou.aliyuncs.com/1559130587555.png","pic_width":13136,"pic_height":4839,"mask_width":97,"mask_height":119,"user_num":35,"building":[{"id":1,"estate_id":1,"number":"7","is_delete":1,"pivot":{"park_area_id":1,"building_id":1,"xaxis":4104,"yaxis":3093,"radius":162,"fontsize":81}},{"id":2,"estate_id":1,"number":"8","is_delete":1,"pivot":{"park_area_id":1,"building_id":2,"xaxis":5720,"yaxis":3792,"radius":162,"fontsize":81}},{"id":3,"estate_id":1,"number":"9","is_delete":1,"pivot":{"park_area_id":1,"building_id":3,"xaxis":8627,"yaxis":3791,"radius":162,"fontsize":81}},{"id":4,"estate_id":1,"number":"10","is_delete":1,"pivot":{"park_area_id":1,"building_id":4,"xaxis":9383,"yaxis":1750,"radius":162,"fontsize":81}}],"park":[{"id":244,"park_area_id":1,"number":"B1","xaxis":"205.0000","yaxis":"3268.0000","show_status":3},{"id":245,"park_area_id":1,"number":"B2","xaxis":"336.0000","yaxis":"3226.0000","show_status":3},{"id":246,"park_area_id":1,"number":"B3","xaxis":"547.0000","yaxis":"3153.0000","show_status":1},{"id":247,"park_area_id":1,"number":"B4","xaxis":"676.0000","yaxis":"3110.0000","show_status":3},{"id":248,"park_area_id":1,"number":"B5","xaxis":"848.0000","yaxis":"3058.0000","show_status":3},{"id":249,"park_area_id":1,"number":"B6","xaxis":"981.9700","yaxis":"3019.1299","show_status":3},{"id":250,"park_area_id":1,"number":"B7","xaxis":"1141.3300","yaxis":"2967.4500","show_status":3},{"id":251,"park_area_id":1,"number":"B12","xaxis":"1852.0000","yaxis":"2748.0000","show_status":3},{"id":252,"park_area_id":1,"number":"B24","xaxis":"3652.2400","yaxis":"2192.2100","show_status":3},{"id":253,"park_area_id":1,"number":"B27","xaxis":"4100.0000","yaxis":"2052.0000","show_status":3},{"id":254,"park_area_id":1,"number":"B28","xaxis":"4234.0000","yaxis":"2005.0000","show_status":3},{"id":255,"park_area_id":1,"number":"B29","xaxis":"4393.0098","yaxis":"1962.0100","show_status":3},{"id":256,"park_area_id":1,"number":"B31","xaxis":"4681.0000","yaxis":"1872.0000","show_status":3},{"id":257,"park_area_id":1,"number":"B32","xaxis":"4810.0000","yaxis":"1829.0000","show_status":3},{"id":258,"park_area_id":1,"number":"B33","xaxis":"4970.0000","yaxis":"1781.0000","show_status":3},{"id":259,"park_area_id":1,"number":"B34","xaxis":"5103.0000","yaxis":"1743.0000","show_status":3},{"id":260,"park_area_id":1,"number":"B35","xaxis":"5258.0000","yaxis":"1691.0000","show_status":3},{"id":261,"park_area_id":1,"number":"B36","xaxis":"5391.0000","yaxis":"1657.0000","show_status":3},{"id":262,"park_area_id":1,"number":"B38","xaxis":"5684.0000","yaxis":"1562.0000","show_status":3},{"id":263,"park_area_id":1,"number":"B42","xaxis":"6364.0000","yaxis":"1493.0000","show_status":3},{"id":264,"park_area_id":1,"number":"B43","xaxis":"6523.0000","yaxis":"1450.0000","show_status":1},{"id":265,"park_area_id":1,"number":"B44","xaxis":"6652.0000","yaxis":"1407.0000","show_status":3},{"id":266,"park_area_id":1,"number":"B45","xaxis":"6811.0000","yaxis":"1360.0000","show_status":3},{"id":267,"park_area_id":1,"number":"B46","xaxis":"6944.0000","yaxis":"1317.0000","show_status":3},{"id":268,"park_area_id":1,"number":"B47","xaxis":"7099.0000","yaxis":"1269.0000","show_status":3},{"id":269,"park_area_id":1,"number":"B48","xaxis":"7233.0000","yaxis":"1226.0000","show_status":3},{"id":270,"park_area_id":1,"number":"B49","xaxis":"7392.0000","yaxis":"1179.0000","show_status":3},{"id":271,"park_area_id":1,"number":"B50","xaxis":"7521.0000","yaxis":"1140.0000","show_status":3},{"id":272,"park_area_id":1,"number":"B51","xaxis":"7685.0000","yaxis":"1089.0000","show_status":2},{"id":273,"park_area_id":1,"number":"B54","xaxis":"8106.0000","yaxis":"740.0000","show_status":1},{"id":274,"park_area_id":1,"number":"B60","xaxis":"9264.0000","yaxis":"508.0000","show_status":1},{"id":275,"park_area_id":1,"number":"B61","xaxis":"9423.0000","yaxis":"542.0000","show_status":3},{"id":276,"park_area_id":1,"number":"B75","xaxis":"11501.0000","yaxis":"985.0000","show_status":3},{"id":277,"park_area_id":1,"number":"B76","xaxis":"11639.0000","yaxis":"1015.0000","show_status":1},{"id":278,"park_area_id":1,"number":"B78","xaxis":"11001.8896","yaxis":"1690.9500","show_status":3},{"id":279,"park_area_id":1,"number":"B84","xaxis":"9401.0000","yaxis":"1304.0000","show_status":3},{"id":280,"park_area_id":1,"number":"B85","xaxis":"9268.0000","yaxis":"1274.0000","show_status":1},{"id":281,"park_area_id":1,"number":"B86","xaxis":"9106.0000","yaxis":"1246.0000","show_status":3},{"id":282,"park_area_id":1,"number":"B91","xaxis":"8036.0000","yaxis":"1767.0000","show_status":3},{"id":283,"park_area_id":1,"number":"B92","xaxis":"7906.0000","yaxis":"1803.0000","show_status":3},{"id":284,"park_area_id":1,"number":"B93","xaxis":"7751.0000","yaxis":"1850.0000","show_status":3},{"id":285,"park_area_id":1,"number":"B94","xaxis":"7617.0000","yaxis":"1891.0000","show_status":3},{"id":286,"park_area_id":1,"number":"B95","xaxis":"7457.0000","yaxis":"1938.0000","show_status":3},{"id":287,"park_area_id":1,"number":"B96","xaxis":"7327.6401","yaxis":"1984.3600","show_status":3},{"id":288,"park_area_id":1,"number":"B97","xaxis":"7167.4399","yaxis":"2030.8700","show_status":3},{"id":289,"park_area_id":1,"number":"B98","xaxis":"7038.0000","yaxis":"2072.0000","show_status":2},{"id":290,"park_area_id":1,"number":"B99","xaxis":"6878.0601","yaxis":"2123.8799","show_status":3},{"id":291,"park_area_id":1,"number":"B104","xaxis":"5576.0000","yaxis":"2465.0000","show_status":3},{"id":292,"park_area_id":1,"number":"B105","xaxis":"5441.0000","yaxis":"2465.0000","show_status":3},{"id":293,"park_area_id":1,"number":"B106","xaxis":"4749.0200","yaxis":"2640.6399","show_status":3},{"id":294,"park_area_id":1,"number":"B107","xaxis":"4620.0000","yaxis":"2677.0000","show_status":3},{"id":295,"park_area_id":1,"number":"B108","xaxis":"4460.0000","yaxis":"2728.0000","show_status":3},{"id":296,"park_area_id":1,"number":"B110","xaxis":"4170.2500","yaxis":"2816.3401","show_status":3},{"id":297,"park_area_id":1,"number":"B111","xaxis":"4041.0601","yaxis":"2857.6799","show_status":3},{"id":298,"park_area_id":1,"number":"B122","xaxis":"1066.0000","yaxis":"3774.0000","show_status":3},{"id":299,"park_area_id":1,"number":"B123","xaxis":"1648.0000","yaxis":"3476.0000","show_status":3},{"id":300,"park_area_id":1,"number":"B124","xaxis":"1692.0000","yaxis":"3606.0000","show_status":3},{"id":301,"park_area_id":1,"number":"B125","xaxis":"1741.0000","yaxis":"3755.0000","show_status":3},{"id":302,"park_area_id":1,"number":"B126","xaxis":"1785.0000","yaxis":"3897.0000","show_status":3},{"id":303,"park_area_id":1,"number":"B127","xaxis":"1834.0000","yaxis":"4052.0000","show_status":3},{"id":304,"park_area_id":1,"number":"B128","xaxis":"1871.0000","yaxis":"4182.0000","show_status":3},{"id":305,"park_area_id":1,"number":"B129","xaxis":"1927.0000","yaxis":"4350.0000","show_status":3},{"id":306,"park_area_id":1,"number":"B130","xaxis":"2516.0000","yaxis":"3823.0000","show_status":3},{"id":307,"park_area_id":1,"number":"B132","xaxis":"2912.2300","yaxis":"3823.0801","show_status":3},{"id":308,"park_area_id":1,"number":"B134","xaxis":"3345.9700","yaxis":"3823.0801","show_status":3},{"id":309,"park_area_id":1,"number":"B135","xaxis":"3544.2500","yaxis":"3823.0801","show_status":3},{"id":310,"park_area_id":1,"number":"B140","xaxis":"4585.2100","yaxis":"3823.0801","show_status":3},{"id":311,"park_area_id":1,"number":"B141","xaxis":"4771.0000","yaxis":"3823.0000","show_status":3},{"id":312,"park_area_id":1,"number":"B142","xaxis":"4982.0000","yaxis":"3823.0000","show_status":3},{"id":313,"park_area_id":1,"number":"B143","xaxis":"5118.0000","yaxis":"3823.0000","show_status":3},{"id":314,"park_area_id":1,"number":"B144","xaxis":"5038.0000","yaxis":"4449.0000","show_status":1},{"id":315,"park_area_id":1,"number":"B145","xaxis":"4629.0000","yaxis":"4449.0000","show_status":3},{"id":316,"park_area_id":1,"number":"B146","xaxis":"4213.0000","yaxis":"4449.0000","show_status":3},{"id":317,"park_area_id":1,"number":"B147","xaxis":"3798.0000","yaxis":"4449.0000","show_status":1},{"id":318,"park_area_id":1,"number":"B148","xaxis":"3383.0000","yaxis":"4449.0000","show_status":3},{"id":319,"park_area_id":1,"number":"B149","xaxis":"2968.0000","yaxis":"4449.0000","show_status":3},{"id":320,"park_area_id":1,"number":"B151","xaxis":"5440.0000","yaxis":"2640.0000","show_status":3},{"id":321,"park_area_id":1,"number":"B153","xaxis":"5440.2900","yaxis":"2949.4099","show_status":3},{"id":322,"park_area_id":1,"number":"B154","xaxis":"5440.0000","yaxis":"3111.0000","show_status":3},{"id":323,"park_area_id":1,"number":"B156","xaxis":"5440.0000","yaxis":"3408.0000","show_status":1},{"id":324,"park_area_id":1,"number":"B157","xaxis":"5440.0000","yaxis":"3550.0000","show_status":3},{"id":325,"park_area_id":1,"number":"B162","xaxis":"7497.0000","yaxis":"3922.0000","show_status":1},{"id":326,"park_area_id":1,"number":"B163","xaxis":"8043.0000","yaxis":"3922.0000","show_status":3},{"id":327,"park_area_id":1,"number":"B164","xaxis":"8173.0000","yaxis":"3922.0000","show_status":1},{"id":328,"park_area_id":1,"number":"B165","xaxis":"8353.0000","yaxis":"3922.0000","show_status":1},{"id":329,"park_area_id":1,"number":"B166","xaxis":"8495.0303","yaxis":"3922.2200","show_status":3},{"id":330,"park_area_id":1,"number":"B167","xaxis":"9177.0000","yaxis":"3922.0000","show_status":3},{"id":331,"park_area_id":1,"number":"B168","xaxis":"9307.0000","yaxis":"3922.0000","show_status":3},{"id":332,"park_area_id":1,"number":"B169","xaxis":"9586.0000","yaxis":"3922.0000","show_status":2},{"id":333,"park_area_id":1,"number":"B170","xaxis":"9728.0000","yaxis":"3922.0000","show_status":3},{"id":334,"park_area_id":1,"number":"B171","xaxis":"10403.0000","yaxis":"3922.0000","show_status":2},{"id":335,"park_area_id":1,"number":"B172","xaxis":"10546.0000","yaxis":"3922.0000","show_status":1},{"id":336,"park_area_id":1,"number":"B173","xaxis":"10744.2598","yaxis":"3922.2200","show_status":3},{"id":337,"park_area_id":1,"number":"B174","xaxis":"10986.0000","yaxis":"3922.0000","show_status":3},{"id":338,"park_area_id":1,"number":"B175","xaxis":"11122.0000","yaxis":"3922.0000","show_status":3},{"id":339,"park_area_id":1,"number":"B176","xaxis":"11314.0000","yaxis":"3922.0000","show_status":3},{"id":340,"park_area_id":1,"number":"B178","xaxis":"11308.0000","yaxis":"3154.0000","show_status":3},{"id":341,"park_area_id":1,"number":"B179","xaxis":"11116.0000","yaxis":"3154.0000","show_status":1},{"id":342,"park_area_id":1,"number":"B180","xaxis":"10980.0000","yaxis":"3154.0000","show_status":3},{"id":343,"park_area_id":1,"number":"B181","xaxis":"11104.0000","yaxis":"2949.0000","show_status":3},{"id":344,"park_area_id":1,"number":"B182","xaxis":"11104.0000","yaxis":"2813.0000","show_status":3},{"id":345,"park_area_id":1,"number":"B183","xaxis":"11103.6396","yaxis":"2645.7900","show_status":3},{"id":346,"park_area_id":1,"number":"B184","xaxis":"11104.0000","yaxis":"2509.0000","show_status":1},{"id":347,"park_area_id":1,"number":"B187","xaxis":"10199.0000","yaxis":"2162.0000","show_status":3},{"id":348,"park_area_id":1,"number":"B189","xaxis":"9790.0000","yaxis":"2162.0000","show_status":1},{"id":349,"park_area_id":1,"number":"B190","xaxis":"9591.7598","yaxis":"2162.4900","show_status":3},{"id":350,"park_area_id":1,"number":"B191","xaxis":"9363.0000","yaxis":"2162.0000","show_status":3},{"id":351,"park_area_id":1,"number":"B192","xaxis":"9183.0000","yaxis":"2162.0000","show_status":3},{"id":352,"park_area_id":1,"number":"B194","xaxis":"8749.0000","yaxis":"2162.0000","show_status":3},{"id":353,"park_area_id":1,"number":"B196","xaxis":"6097.0000","yaxis":"2925.0000","show_status":3},{"id":354,"park_area_id":1,"number":"B197","xaxis":"6233.0000","yaxis":"2925.0000","show_status":3},{"id":355,"park_area_id":1,"number":"B198","xaxis":"6401.0000","yaxis":"2925.0000","show_status":3},{"id":356,"park_area_id":1,"number":"B199","xaxis":"6537.0000","yaxis":"2925.0000","show_status":3},{"id":357,"park_area_id":1,"number":"B202","xaxis":"7007.9399","yaxis":"2924.6201","show_status":3},{"id":358,"park_area_id":1,"number":"B203","xaxis":"7150.0000","yaxis":"2925.0000","show_status":3},{"id":359,"park_area_id":1,"number":"B204","xaxis":"7311.5498","yaxis":"2924.6201","show_status":3},{"id":360,"park_area_id":1,"number":"B208","xaxis":"8049.0000","yaxis":"2925.0000","show_status":3},{"id":361,"park_area_id":1,"number":"B209","xaxis":"8185.0000","yaxis":"2925.0000","show_status":3},{"id":362,"park_area_id":1,"number":"B210","xaxis":"8322.0000","yaxis":"2925.0000","show_status":3},{"id":363,"park_area_id":1,"number":"B211","xaxis":"8488.8398","yaxis":"2924.6201","show_status":3},{"id":364,"park_area_id":1,"number":"B212","xaxis":"8625.0000","yaxis":"2925.0000","show_status":1},{"id":365,"park_area_id":1,"number":"B213","xaxis":"8792.0000","yaxis":"2925.0000","show_status":3},{"id":366,"park_area_id":1,"number":"B214","xaxis":"8929.0000","yaxis":"2925.0000","show_status":3},{"id":367,"park_area_id":1,"number":"B215","xaxis":"9096.0000","yaxis":"2925.0000","show_status":3},{"id":368,"park_area_id":1,"number":"B216","xaxis":"9232.0000","yaxis":"2925.0000","show_status":3},{"id":369,"park_area_id":1,"number":"B217","xaxis":"9400.0000","yaxis":"2925.0000","show_status":3},{"id":370,"park_area_id":1,"number":"B218","xaxis":"9536.0000","yaxis":"2925.0000","show_status":3},{"id":371,"park_area_id":1,"number":"B219","xaxis":"9703.2998","yaxis":"2924.6201","show_status":3},{"id":372,"park_area_id":1,"number":"B220","xaxis":"9840.0000","yaxis":"2925.0000","show_status":3},{"id":373,"park_area_id":1,"number":"B221","xaxis":"10007.0000","yaxis":"2925.0000","show_status":3},{"id":374,"park_area_id":1,"number":"B222","xaxis":"10143.0000","yaxis":"2925.0000","show_status":3},{"id":375,"park_area_id":1,"number":"B223","xaxis":"10317.0000","yaxis":"2925.0000","show_status":3},{"id":376,"park_area_id":1,"number":"B224","xaxis":"10447.0000","yaxis":"2925.0000","show_status":3},{"id":377,"park_area_id":1,"number":"B225","xaxis":"10447.0000","yaxis":"3154.0000","show_status":3},{"id":378,"park_area_id":1,"number":"B226","xaxis":"10304.0000","yaxis":"3154.0000","show_status":3},{"id":379,"park_area_id":1,"number":"B227","xaxis":"10143.0000","yaxis":"3154.0000","show_status":3},{"id":380,"park_area_id":1,"number":"B228","xaxis":"10007.0000","yaxis":"3154.0000","show_status":1},{"id":381,"park_area_id":1,"number":"B231","xaxis":"9542.0000","yaxis":"3154.0000","show_status":3},{"id":382,"park_area_id":1,"number":"B232","xaxis":"9400.0000","yaxis":"3154.0000","show_status":3},{"id":383,"park_area_id":1,"number":"B233","xaxis":"9232.0000","yaxis":"3154.0000","show_status":3},{"id":384,"park_area_id":1,"number":"B234","xaxis":"9096.0000","yaxis":"3154.0000","show_status":3},{"id":385,"park_area_id":1,"number":"B235","xaxis":"8929.0000","yaxis":"3154.0000","show_status":1},{"id":386,"park_area_id":1,"number":"B236","xaxis":"8792.0000","yaxis":"3154.0000","show_status":1},{"id":387,"park_area_id":1,"number":"B237","xaxis":"8631.0000","yaxis":"3154.0000","show_status":1},{"id":388,"park_area_id":1,"number":"B238","xaxis":"8489.0000","yaxis":"3154.0000","show_status":3},{"id":389,"park_area_id":1,"number":"B239","xaxis":"8322.0000","yaxis":"3154.0000","show_status":3},{"id":390,"park_area_id":1,"number":"B241","xaxis":"8043.0000","yaxis":"3154.0000","show_status":1},{"id":391,"park_area_id":1,"number":"B245","xaxis":"7312.0000","yaxis":"3154.0000","show_status":3},{"id":392,"park_area_id":1,"number":"B246","xaxis":"7144.0000","yaxis":"3154.0000","show_status":3},{"id":393,"park_area_id":1,"number":"B248","xaxis":"6841.0000","yaxis":"3154.0000","show_status":3},{"id":394,"park_area_id":1,"number":"B249","xaxis":"6704.0000","yaxis":"3154.0000","show_status":3},{"id":395,"park_area_id":1,"number":"B250","xaxis":"6537.0000","yaxis":"3154.0000","show_status":3},{"id":396,"park_area_id":1,"number":"B252","xaxis":"6233.0000","yaxis":"3154.0000","show_status":3},{"id":397,"park_area_id":1,"number":"B253","xaxis":"6097.0000","yaxis":"3154.0000","show_status":3},{"id":398,"park_area_id":1,"number":"B56","xaxis":"8613.0000","yaxis":"377.0000","show_status":3},{"id":399,"park_area_id":1,"number":"B74","xaxis":"11339.0000","yaxis":"954.0000","show_status":3},{"id":400,"park_area_id":1,"number":"B80","xaxis":"10261.0000","yaxis":"1487.0000","show_status":3},{"id":401,"park_area_id":1,"number":"B8","xaxis":"1274.4399","yaxis":"2897.0100","show_status":3},{"id":402,"park_area_id":1,"number":"B9","xaxis":"1442.2900","yaxis":"2847.2800","show_status":3},{"id":403,"park_area_id":1,"number":"B10","xaxis":"1572.8400","yaxis":"2809.9800","show_status":3},{"id":404,"park_area_id":1,"number":"B11","xaxis":"1715.8300","yaxis":"2760.2400","show_status":3},{"id":405,"park_area_id":1,"number":"B13","xaxis":"2070.1799","yaxis":"2654.5601","show_status":3},{"id":406,"park_area_id":1,"number":"B14","xaxis":"2194.5200","yaxis":"2617.2600","show_status":3},{"id":407,"park_area_id":1,"number":"B15","xaxis":"2356.1499","yaxis":"2567.5200","show_status":3},{"id":408,"park_area_id":1,"number":"B16","xaxis":"2486.7100","yaxis":"2524.0100","show_status":3},{"id":409,"park_area_id":1,"number":"B17","xaxis":"2642.1299","yaxis":"2474.2700","show_status":3},{"id":410,"park_area_id":1,"number":"B18","xaxis":"2778.8899","yaxis":"2430.7600","show_status":3},{"id":411,"park_area_id":1,"number":"B19","xaxis":"2940.5300","yaxis":"2387.2400","show_status":3},{"id":412,"park_area_id":1,"number":"B20","xaxis":"3071.0801","yaxis":"2343.7200","show_status":3},{"id":413,"park_area_id":1,"number":"B21","xaxis":"3226.5000","yaxis":"2300.2000","show_status":3},{"id":414,"park_area_id":1,"number":"B22","xaxis":"3357.0500","yaxis":"2256.6899","show_status":3},{"id":415,"park_area_id":1,"number":"B23","xaxis":"3518.6899","yaxis":"2206.9500","show_status":3},{"id":416,"park_area_id":1,"number":"B25","xaxis":"3810.8701","yaxis":"2126.1299","show_status":3},{"id":417,"park_area_id":1,"number":"B26","xaxis":"3935.2100","yaxis":"2076.3999","show_status":3},{"id":418,"park_area_id":1,"number":"B30","xaxis":"4519.5801","yaxis":"1908.5500","show_status":3},{"id":419,"park_area_id":1,"number":"B37","xaxis":"5545.3501","yaxis":"1597.7100","show_status":3},{"id":420,"park_area_id":1,"number":"B39","xaxis":"5930.7900","yaxis":"1610.1400","show_status":3},{"id":421,"park_area_id":1,"number":"B40","xaxis":"6067.5601","yaxis":"1566.6300","show_status":3},{"id":422,"park_area_id":1,"number":"B41","xaxis":"6222.9800","yaxis":"1523.1100","show_status":3},{"id":423,"park_area_id":1,"number":"B52","xaxis":"7802.0298","yaxis":"1038.2000","show_status":3},{"id":424,"park_area_id":1,"number":"B53","xaxis":"8069.3501","yaxis":"889.0000","show_status":3},{"id":425,"park_area_id":1,"number":"B55","xaxis":"8467.2197","yaxis":"329.4900","show_status":3},{"id":426,"park_area_id":1,"number":"B57","xaxis":"8821.5801","yaxis":"404.0900","show_status":3},{"id":427,"park_area_id":1,"number":"B58","xaxis":"8958.3496","yaxis":"428.9600","show_status":3},{"id":428,"park_area_id":1,"number":"B59","xaxis":"9119.9805","yaxis":"466.2600","show_status":3},{"id":429,"park_area_id":1,"number":"B62","xaxis":"9555.1602","yaxis":"559.5100","show_status":3},{"id":430,"park_area_id":1,"number":"B63","xaxis":"9716.7900","yaxis":"596.8100","show_status":3},{"id":431,"park_area_id":1,"number":"B64","xaxis":"9847.3398","yaxis":"621.6800","show_status":3},{"id":432,"park_area_id":1,"number":"B65","xaxis":"10008.9805","yaxis":"652.7600","show_status":3},{"id":433,"park_area_id":1,"number":"B66","xaxis":"10145.7500","yaxis":"683.8500","show_status":3},{"id":434,"park_area_id":1,"number":"B67","xaxis":"10307.3799","yaxis":"721.1500","show_status":3},{"id":435,"park_area_id":1,"number":"B68","xaxis":"10437.9297","yaxis":"752.2300","show_status":3},{"id":436,"park_area_id":1,"number":"B69","xaxis":"10605.7900","yaxis":"783.3200","show_status":3},{"id":437,"park_area_id":1,"number":"B70","xaxis":"10736.3398","yaxis":"808.1800","show_status":3},{"id":438,"park_area_id":1,"number":"B71","xaxis":"10904.1904","yaxis":"845.4800","show_status":3},{"id":439,"park_area_id":1,"number":"B72","xaxis":"11034.7402","yaxis":"876.5700","show_status":3},{"id":440,"park_area_id":1,"number":"B73","xaxis":"11202.5898","yaxis":"907.6500","show_status":3},{"id":441,"park_area_id":1,"number":"B77","xaxis":"11127.9902","yaxis":"1672.3101","show_status":3},{"id":442,"park_area_id":1,"number":"B121","xaxis":"1505.9301","yaxis":"3652.9600","show_status":3},{"id":443,"park_area_id":1,"number":"B120","xaxis":"2301.9199","yaxis":"3394.8000","show_status":3},{"id":444,"park_area_id":1,"number":"B119","xaxis":"2710.6799","yaxis":"3261.4199","show_status":3},{"id":445,"park_area_id":1,"number":"B118","xaxis":"2839.7600","yaxis":"3222.6899","show_status":3},{"id":446,"park_area_id":1,"number":"B117","xaxis":"3162.4600","yaxis":"3123.7300","show_status":3},{"id":447,"park_area_id":1,"number":"B116","xaxis":"3295.8401","yaxis":"3085.0100","show_status":3},{"id":448,"park_area_id":1,"number":"B115","xaxis":"3455.0400","yaxis":"3033.3799","show_status":3},{"id":449,"park_area_id":1,"number":"B114","xaxis":"3588.4199","yaxis":"2994.6499","show_status":3},{"id":450,"park_area_id":1,"number":"B113","xaxis":"3743.3101","yaxis":"2943.0200","show_status":3},{"id":451,"park_area_id":1,"number":"B112","xaxis":"3876.7000","yaxis":"2904.3000","show_status":3},{"id":452,"park_area_id":1,"number":"B109","xaxis":"4324.1699","yaxis":"2770.9099","show_status":3},{"id":453,"park_area_id":1,"number":"B131","xaxis":"2710.6799","yaxis":"3825.0601","show_status":3},{"id":454,"park_area_id":1,"number":"B133","xaxis":"3132.3401","yaxis":"3829.3701","show_status":3},{"id":455,"park_area_id":1,"number":"B136","xaxis":"3751.9199","yaxis":"3829.3701","show_status":3},{"id":456,"park_area_id":1,"number":"B137","xaxis":"3941.2400","yaxis":"3825.0601","show_status":3},{"id":457,"park_area_id":1,"number":"B138","xaxis":"4190.7900","yaxis":"3829.3701","show_status":3},{"id":458,"park_area_id":1,"number":"B139","xaxis":"4362.8999","yaxis":"3829.3701","show_status":3},{"id":459,"park_area_id":1,"number":"B150","xaxis":"2555.7800","yaxis":"4448.9502","show_status":3},{"id":460,"park_area_id":1,"number":"B155","xaxis":"5434.2598","yaxis":"3252.8101","show_status":3},{"id":461,"park_area_id":1,"number":"B152","xaxis":"5442.8599","yaxis":"2809.6399","show_status":3},{"id":462,"park_area_id":1,"number":"B103","xaxis":"6268.9702","yaxis":"2185.7500","show_status":3},{"id":463,"park_area_id":1,"number":"B102","xaxis":"6449.6802","yaxis":"2245.9900","show_status":3},{"id":464,"park_area_id":1,"number":"B101","xaxis":"6583.0601","yaxis":"2207.2700","show_status":3},{"id":465,"park_area_id":1,"number":"B100","xaxis":"6737.9600","yaxis":"2159.9399","show_status":3},{"id":466,"park_area_id":1,"number":"B200","xaxis":"6703.5400","yaxis":"2930.1101","show_status":3},{"id":467,"park_area_id":1,"number":"B201","xaxis":"6841.2202","yaxis":"2930.1101","show_status":3},{"id":468,"park_area_id":1,"number":"B205","xaxis":"7447.8999","yaxis":"2930.1101","show_status":3},{"id":469,"park_area_id":1,"number":"B206","xaxis":"7615.7002","yaxis":"2930.1101","show_status":3},{"id":470,"park_area_id":1,"number":"B207","xaxis":"7753.3901","yaxis":"2930.1101","show_status":3},{"id":471,"park_area_id":1,"number":"B251","xaxis":"6398.0498","yaxis":"3153.8501","show_status":3},{"id":472,"park_area_id":1,"number":"B247","xaxis":"7009.0298","yaxis":"3153.8501","show_status":3},{"id":473,"park_area_id":1,"number":"B244","xaxis":"7447.8999","yaxis":"3153.8501","show_status":3},{"id":474,"park_area_id":1,"number":"B243","xaxis":"7615.7002","yaxis":"3153.8501","show_status":3},{"id":475,"park_area_id":1,"number":"B242","xaxis":"7753.3901","yaxis":"3153.8501","show_status":3},{"id":476,"park_area_id":1,"number":"B240","xaxis":"8183.6499","yaxis":"3158.1499","show_status":3},{"id":477,"park_area_id":1,"number":"B158","xaxis":"6260.3701","yaxis":"3928.3301","show_status":3},{"id":478,"park_area_id":1,"number":"B159","xaxis":"6398.0498","yaxis":"3928.3301","show_status":3},{"id":479,"park_area_id":1,"number":"B160","xaxis":"6686.3301","yaxis":"3928.3301","show_status":3},{"id":480,"park_area_id":1,"number":"B161","xaxis":"6824.0098","yaxis":"3928.3301","show_status":3},{"id":481,"park_area_id":1,"number":"B195","xaxis":"8058.8701","yaxis":"2159.9399","show_status":3},{"id":482,"park_area_id":1,"number":"B230","xaxis":"9702.4902","yaxis":"3158.1499","show_status":3},{"id":483,"park_area_id":1,"number":"B229","xaxis":"9835.8701","yaxis":"3158.1499","show_status":3},{"id":484,"park_area_id":1,"number":"B177","xaxis":"11445.0596","yaxis":"3153.8501","show_status":3},{"id":485,"park_area_id":1,"number":"B185","xaxis":"11109.4600","yaxis":"1914.6899","show_status":3},{"id":486,"park_area_id":1,"number":"B186","xaxis":"10403.8203","yaxis":"2164.2400","show_status":3},{"id":487,"park_area_id":1,"number":"B188","xaxis":"9995.0703","yaxis":"2155.6299","show_status":3},{"id":488,"park_area_id":1,"number":"B193","xaxis":"8975.3398","yaxis":"2159.9399","show_status":3},{"id":489,"park_area_id":1,"number":"B79","xaxis":"10390.9102","yaxis":"1514.5400","show_status":3},{"id":490,"park_area_id":1,"number":"B81","xaxis":"9861.6904","yaxis":"1402.6700","show_status":3},{"id":491,"park_area_id":1,"number":"B82","xaxis":"9698.1904","yaxis":"1368.2500","show_status":3},{"id":492,"park_area_id":1,"number":"B83","xaxis":"9560.5000","yaxis":"1333.8300","show_status":3},{"id":493,"park_area_id":1,"number":"B87","xaxis":"8975.3398","yaxis":"1209.0500","show_status":3},{"id":494,"park_area_id":1,"number":"B88","xaxis":"8807.5400","yaxis":"1174.6300","show_status":3},{"id":495,"park_area_id":1,"number":"B89","xaxis":"8674.1504","yaxis":"1148.8101","show_status":3}],"countdown":{"id":1,"isclose":1,"starttime":null}}');
    var cartParkArr = JSON.parse('[]');
    var this_estate_id = '1';
    var building_id = '10'
    //提高Android性能
    function judge_brower() {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
            return 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
            return 'android';
        } else { //pc
            return 'pc';
        }
    }
    $(function () {
        if (judge_brower() === 'android') {
            $('.panzoom').addClass('android_box');
        }
    });
    //		禁止微信下拉露底和回弹
    $('.parent').on('touchmove', function (event) {
        event.preventDefault();
    });
    //		禁止微信下拉露底和回弹
    $('.choose_bottom_layer_body').on('touchmove', function (event) {
        event.preventDefault();
    });
</script>
<script>
    //初始化缩放插件
    var $section = $('.parent');
    $section.find('.panzoom').panzoom({
        maxScale: 50,
        minScale: 1,
        increment: 1,
    });

    //定义图片加载及车位绘制函数
    var loadImg = {
        url: null,
        panzoom: $('.panzoom'),
        newMap: $('.new_map'),
        loadImg: null,
        nWidth: null, //图片实际宽度
        nHeight: null, //图片实际高度
        mapUrl: 'map/map-1.png', //加载缩放地图地址
        thumbnail: '?x-oss-process=image/resize,m_lfit,w_400',
        original_w: '?x-oss-process=image/resize,m_lfit,w_4000',
        original_h: '?x-oss-process=image/resize,m_lfit,h_4000',
        //初始化数据并加载地图
        init: function (url, nw, nh) {
            var that = this;
            //参数初始化
            that.url = url;
            that.nWidth = nw;
            that.nHeight = nh;
            //添加预加载图片标签
            that.panzoom.append('<img id="loadImg" style="display: none;" />');
            that.loadImg = $('#loadImg');
            //初始化图片地址缩略图地址
            that.newMap.attr('src', that.url + that.thumbnail);
            //判断原始尺寸，缩放车位图尺寸,替换缩略图地址
            if (that.nWidth > that.nHeight * 3 && that.nHeight > 4000) {
                //宽度大于3倍的高度--横超长
                //如果高度大于4000，缩放高度
                that.mapUrl = that.url + that.original_h;

            } else if (that.nHeight > that.nWidth * 3 && that.nWidth > 4000) {
                //高度大约三倍的宽度--竖向超长
                //如果宽度大于4000，缩放宽度
                that.mapUrl = that.url + that.original_h;

            } else if (that.nWidth > that.nHeight && that.nWidth > 4000) {
                //横向长图
                that.mapUrl = that.url + that.original_w;

            } else if (that.nHeight > that.nWidth && that.nHeight > 4000) {
                //竖向长图
                that.mapUrl = that.url + that.original_h;
            } else {
                //重新在线转换尺寸以适配移动端显示
                that.mapUrl = that.url;
            }
            that.loadImg.attr('src', 'map/map.png');

            //原图加载完成后，更新地图显示并加载车位
            that.loadImg.load(function () {
                //替换车位图地址--测试用
                that.newMap.attr('src', that.mapUrl);
                //请求车位数据并绘制
                that.addPark();
            });
        },
        //请求并添加车位
        addPark: function () {
            var that = this;
            //计算比例
            var scale = 400 / that.nWidth;
            //设置缩放区域高度
            that.panzoom.css('height', scale * that.nHeight);
            //定义车位数组和楼幢数组--模拟定义
            var arr = pageData.park;
            var building = pageData.building;
            //遮罩宽高
            var mask_width = pageData.mask_width;
            var mask_height = pageData.mask_height;
            //循环添加车位
            arr.forEach(function (el) {
                //创建一个div
                var new_spot = document.createElement('div');
                //收藏车位样式
                if ((cartParkArr.indexOf(el.id) > -1)) {
                    $(new_spot).addClass('gouwuche');
                    $(new_spot).attr('data-iscart', 'iscart');
                } else {
                    $(new_spot).addClass('spot_img');
                }

                //定义显示文字及颜色
                if (el.show_status == 1 && (cartParkArr.indexOf(el.id) == -1)) {
                    //可售
                    $(new_spot).text('可售');
                    new_spot.style.backgroundColor = '#26c100';
                } else if (el.show_status == 2 && (cartParkArr.indexOf(el.id) == -1)) {
                    //已订
                    $(new_spot).text('已订');
                    new_spot.style.backgroundColor = '#e2e205';
                } else if (cartParkArr.indexOf(el.id) == -1) {
                    //已售
                    $(new_spot).text('已售');
                    new_spot.style.backgroundColor = '#dd0000';
                }

                //添加样式
                new_spot.style.width = Math.ceil(mask_width * scale * 10) + 'px';
                new_spot.style.height = Math.ceil(mask_width * scale * 10) + 'px';
                new_spot.style.borderRadius = Math.ceil(mask_width * scale * 10) + 'px';
                new_spot.style.fontSize = Math.ceil(mask_width * scale * 10 / 2.5) + 'px';
                new_spot.style.lineHeight = Math.ceil(mask_width * scale * 10) + 'px';
                new_spot.style.top = ((el.yaxis * scale) + mask_height * scale / 2) + 'px';
                new_spot.style.left = (el.xaxis * scale) + 'px';

                //将数据添加到页面中
                that.panzoom.append(new_spot);
            });
            //定义变量存放绑定楼幢的数据
            var thisBuildingData = null;
            //循环添加楼幢
            //添加楼幢
            building.forEach(function (t) {
                if (building_id == t.id) {
                    thisBuildingData = t.pivot;
                }
                var thisBuilding = '<div class="building_box" style="top: ' + (t.pivot.yaxis * scale + t.pivot.radius * scale) + 'px;left: ' + (t.pivot.xaxis * scale) + 'px;width: ' + (t.pivot.radius * scale * 20) + 'px;height: ' + (t.pivot.radius * scale * 20) + 'px;border-radius: ' + (t.pivot.radius * scale * 12) + 'px;font-size: ' + (t.pivot.fontsize * scale * 10) + 'px;line-height: ' + (t.pivot.radius * scale * 20) + 'px;">' + t.number + '#' + '</div>';
                that.panzoom.append(thisBuilding);
            });
            //如果有绑定楼幢，就滚动到当前楼幢位置
            if (thisBuildingData) {
                var parentWR = $('.parent').width() / 2;
                var parentHR = $('.parent').height() / 2;
                if (that.nHeight > 1600 && that.nHeight > 1600) {
                    //原始图片大就缩放
                    that.panzoom.css({
                        'transform': 'matrix(' + 1 / (scale * 4) + ', 0, 0, ' + 1 / (scale * 4) + ', ' + ((200 / (scale * 4) - 200) + (parentWR - thisBuildingData.xaxis * scale * 1 / (scale * 4))) + ', ' + ((that.nHeight / 8 - that.nHeight * scale / 2) + (parentHR - thisBuildingData.yaxis * scale * 1 / (scale * 4))) + ')'
                    });
                } else {
                    //原始图片小就不缩放
                    that.panzoom.css({
                        'transform': 'matrix(1, 0, 0, 1, ' + (parentWR - thisBuildingData.xaxis * scale) + ', ' + (parentHR - thisBuildingData.yaxis * scale) + ')'
                    });
                }
            }

        }

    }
    //初始化函数，传入需要的参数---页面首次加载时必须得到的数据有：图片原始地址，图片原始的宽高尺寸
    loadImg.init(pageData.pic, pageData.pic_width, pageData.pic_height);
</script>

</html>